<template>
	<view class="" style="position: relative;padding: 20px;">
		<view class="opinion-main" style="font-size: 30px;">
			Hello
		</view>
		<view class="opinion-main" style="font-size: 18px;">
			有什么好的建议可以分享下哦~
		</view>
		<view class="opinion-content">
			<textarea :disabled="isUpImageIng?true:false" placeholder="请输入您的宝贵建议" :maxlength="-1"
				v-model="textValue"></textarea>
			<view class="image-container">
				<view v-for="(image, index) in uploadedImages" :key="index" class="image-item">
					<image :src="image" mode="aspectFill" />
					<uni-icons class="close-icon" type="clear" size="28" color="#3a3a3a"
						@click="deleteImage(image,index)" />
				</view>
				<view :style="{pointerEvents:isUpImageIng?'none':''}" v-if="uploadedImages.length < 3"
					class="upload-box" @click="chooseAndUploadImage">
					<uni-icons type="plusempty" size="50" color="#999" />
					<view class="upload-box_text">
						添加图片 {{uploadedImages.length}}/3
					</view>
				</view>
			</view>
		</view>

		<view class="opinion-bottom">
			<button :style="{pointerEvents:isUpImageIng?'none':''}" class="opinion-btn"
				@click="sendOpinion">发送反馈</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useAuthStore
	} from '@/store/index.js';
	import {
		delOss,
		upOpinion
	} from '../../api/my';

	const uploadedImages = ref([])
	// 存储上传成功后的图片地址
	const uploadedImageUrls = ref([]);
	const textValue = ref('')
	const isUpImageIng = ref(false)
	const userStore = useAuthStore();
	const userId = ref(userStore.userId);

	// 选择并上传图片
	const chooseAndUploadImage = async () => {
		try {
			const chooseResult = await uni.chooseImage({
				count: 3 - uploadedImages.value.length, // 最多可选择的图片数量
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera']
			});

			const tempFilePaths = chooseResult.tempFilePaths;
			if (tempFilePaths.length > 0) {
				uni.showLoading({
					title: "图片上传中"
				});
				isUpImageIng.value = true
				for (const filePath of tempFilePaths) {
					const uploadResult = await uni.uploadFile({
						url: 'https://www.zxsl.zxmap.cn/ai-api/resource/oss/upload', // 替换为实际的上传接口地址
						filePath: filePath,
						name: 'file', // 上传文件的字段名
						formData: {
							// 可以添加其他表单数据
							'key': 'value'
						}
					});
					console.log('你是什么？', uploadResult);
					if (uploadResult.statusCode === 200) {
						// 假设服务器返回的是图片的 URL
						const responseData = JSON.parse(uploadResult.data);
						uploadedImageUrls.value.push(responseData.data);
						uploadedImages.value.push(filePath);
						isUpImageIng.value = false
					} else {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
						isUpImageIng.value = false
					}
				}
				uni.hideLoading()
			}
		} catch (error) {
			console.error('选择图片时出错:', error);
			uni.showToast({
				title: '操作失败',
				icon: 'none'
			});
			isUpImageIng.value = false
		}
	};

	// 删除图片
	const deleteImage = async (data, index) => {
		await uploadedImages.value.splice(index, 1);
		let id = uploadedImageUrls.value[index].ossId
		await delOss(id)
		await uploadedImageUrls.value.splice(index, 1);
	};

	const sendOpinion = async () => {
		const res = await upOpinion({
			userId: userStore.userId,
			feedbackType:'会议反馈',
			feedbackContent: textValue.value,
			img: JSON.stringify(uploadedImageUrls.value)
		})
		if (res.data.code == 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'none'
			});
			uni.navigateBack()
		} else {
			uni.showToast({
				title: '提交失败',
				icon:'fail',
				icon: 'none'
			});
		}
	}
</script>

<style>
	.opinion-main {
		padding: 10px 0;
	}

	.opinion-content {
		border-radius: 20px;
		background-color: #fff;
		border: 1px solid #f5f7fb;
		padding: 20px 10px;
	}

	.opinion-bottom {
		margin-top: 80px;
	}

	.opinion-btn {
		border-radius: 20px;
		background-color: #007aff;
		color: #fff;
	}

	.image-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3 等分列 */
	}

	.image-item {
		width: 100px;
		height: 100px;
		position: relative;
	}

	.close-icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.image-item image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 20px;
	}

	.upload-box {
		width: 100px;
		height: 100px;
		border: 2px dashed #999;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		flex-direction: column;
	}

	.upload-box_text {
		font-size: 13px;
		color: #404040;
	}
</style>